﻿		<p class="right"><a href="{url_to controller="account"}">Retourner à la liste de vos comptes</a></p>
		<br/>
		<table id="account_details">
			<tr>
				<td class="border"><label>Type de compte:</label>{$entitled}</td>
				<td class="border">
					<label>Dépôt maximum:</label>{$ceiling}<br/>
					<label>Découvert autorisé:</label>{$overdraft}
				</td>
			</tr>
			<tr>
				<td class="border"><label>Date de création:</label>{$creation_date}</td>
				<td class="border"><label>Solde:</label>{$amount}</td>
			</tr>
			<tr>
				<td colspan="2" class="border">
					<div id="center_div">
						<table id="trs_list_tbl"></table>
						<div id="pager"></div>
					</div> 
					<script>
					{literal}
						$(function(){ 
						  	$("#trs_list_tbl").jqGrid({
							    url:'{/literal}{url_to controller="account" action="trs" params=[$id]}{literal}',
								datatype: 'json',
								mtype: 'POST',
							    colNames:['Date','Intitulé', 'Montant'],
							    colModel :[ 
							    	{name:'date', index:'date', width:200}, 
							    	{name:'entitled', index:'entitled', width:200}, 
							    	{name:'amount', index:'amount', width:200, align:'right'}, 
						    	],
						    	pager: '#pager',
								rowNum: 10,
								rowList: [10,20,30],
							    sortname: 'Date',
							    sortorder: 'desc',
							    viewrecords: true,
							    gridview: true,
							    caption: 'Transactions sur le compte',
							    height: 220,
							    hidegrid: false
						  	});
						}); 
					{/literal}
					</script>
				</td>
			</tr>
			<tr>
				<td class="border center">
					<button id="edit_rib">Editer un RIB</button>
				</td>
				<td class="border center">
					{if $withdraw eq '1'}
					<button id="transfer">Effectuer un virement</button>
					{/if}
				</td>
			</tr>
		</table>
		<div id="transfer_form" title="Effectuer un virement">
			<form>
				<fieldset>
					<label for="Amount">Montant :</label>
					<input type="text" name="Amount" id="Amount" class="text ui-widget-content ui-corner-all" /><br />
					<label for="Comment">Commentaire :</label>
					<input type="text" name="Comment" id="Comment" class="text ui-widget-content ui-corner-all" /><br /><br />
					RIB du compte de destination :<br/>
					<ul>
						<li>
							<label for="BankCode">Code banque :</label>
							<input type="text" name="BankCode" id="BankCode" class="text ui-widget-content ui-corner-all" />
						</li>
						<li>
							<label for="CaskDeskCode">Code guichet :</label>
							<input type="text" name="CaskDeskCode" id="CaskDeskCode" class="text ui-widget-content ui-corner-all" />
						</li>
						<li>
							<label for="AccountNumber">Numéro de compte :</label>
							<input type="text" name="AccountNumber" id="AccountNumber" class="text ui-widget-content ui-corner-all" />
						</li>
						<li>
							<label for="RIBKey">Clé RIB :</label>
							<input type="text" name="RIBKey" id="RIBKey" class="text ui-widget-content ui-corner-all" />
						</li>
					</ul>
					<br /><br />
					OU<br/><br/>
					<label for="myAccount">Un de vos comptes :</label>
					<select id="myAccount" name="myAccount">
						<option value="0">Choisir</option>
						{foreach from=$otheraccounts key=k item=v} 
						<option value="{$k}">{$v.type}</option>
						{/foreach}
					</select>
				</fieldset><br/>
			</form>
			<p class="validateTips"></p>
		</div>
		<script>
		{literal}
			$(function(){
				
				var montant = $( "#Amount" ),
					comment = $( "#Comment" ),
					bankcode = $( "#BankCode" ),
					cashdeskcode = $( "#CaskDeskCode" ),
					acountnumber = $( "#AccountNumber" ),
					ribkey = $( "#RIBKey" ),
					allFields = $( [] ).add( montant ).add( comment ).add( bankcode ).add( cashdeskcode ).add( acountnumber ).add( ribkey ),
					tips = $( "#transfer_form .validateTips" ),
					myAcc = $( "#myAccount" );
					myAccList = new Array ( ) ;
				
				{/literal}
				{foreach from=$otheraccounts key=k item=v}
				myAccList[{$k}] = [ "{$v.bankcode}", "{$v.cashdeskcode}", "{$v.accountnumber}", "{$v.ribkey}" ] ; 
				{/foreach}
				{literal}
				
				function updateTips( t ) {
					tips
						.text( t )
						.addClass( "ui-state-highlight" );
					setTimeout(function() {
						tips.removeClass( "ui-state-highlight", 1500 );
					}, 500 );
				}
		
				function checkRegexp( o, regexp, n ) {
					if ( !( regexp.test( o.val() ) ) ) {
						o.addClass( "ui-state-error" );
						updateTips( n );
						return false;
					} else {
						return true;
					}
				}
				
				$("#edit_rib")
					.button()
					.click(function(){
						window.open('{/literal}{url_to controller="account" action="rib" params=[$id]}{literal}', 'Votre RIB', 'width=500,height=200,menubar=yes');
					});
				
				$("#transfer")
					.button()
					.click(function(){
						$( "#transfer_form" ).dialog ( "open" ) ;
					});
				
				myAcc
					.change(function(){
						bankcode.val ( myAccList[myAcc.val()][0] ) ;
						cashdeskcode.val ( myAccList[myAcc.val()][1] ) ;
						acountnumber.val ( myAccList[myAcc.val()][2] ) ;
						ribkey.val ( myAccList[myAcc.val()][3] ) ;
						
						myAcc.val ( "0" ) ;
						
					});
				
				$( "#transfer_form" ).dialog({
					autoOpen: false,
					height: 500,
					width: 550,
					modal: true,
					buttons: {
						"Envoyer": function() {
							var bValid = true;
							allFields.removeClass( "ui-state-error" );
							
							bValid = bValid && checkRegexp( montant, /^[0-9]+(\.[0-9]{1,2}){0,1}$/i, "Le montant est incorrecte." );
							bValid = bValid && checkRegexp( comment, /^[0-9A-Za-z ]{5,150}$/i, "Le commentaire  doit être une chaine alphanumérique de 5 à 150 caractères." );
							bValid = bValid && checkRegexp( bankcode, /^[0-9]{5}$/i, "Le code banque est une chaine de 5 chiffres." );
							bValid = bValid && checkRegexp( cashdeskcode, /^[0-9]{5}$/i, "Le code guichet est une chaine de 5 chiffres." );
							bValid = bValid && checkRegexp( acountnumber, /^[0-9]{11}$/i, "Le numéro de compte est une chaine de 11 chiffres." );
							bValid = bValid && checkRegexp( ribkey, /^[0-9]{2}$/i, "La clé RIB est une chaine de 2 chiffres." );
		
							if ( bValid ) {
								// Si les champs sont valides, faire une requête Ajax pour tenter de connecter l'utilisateur
								
								allFields.removeClass( "ui-state-error" );
								tips.text( "" );
								
								$.post( "{/literal}{url_to controller="account" action="transfer"}{literal}",
									{
										transfer_form: 0,
										account: {/literal}{$id}{literal},
										amount: montant.val(),
										comment: comment.val(),
										bankcode: bankcode.val(),
										cashdeskcode: cashdeskcode.val(),
										acountnumber: acountnumber.val(),
										ribkey: ribkey.val()
									},
										function(data){
											updateTips( data[1] ) ;
											
											if ( data[0] == 1 )
												setTimeout( function() {
														$( location ).attr( "href", "" );
													},
													1000 );
										},
										"json");
								
							}
							
						},
						"Reset": function() {
							allFields.val( "" ).removeClass( "ui-state-error" );
							myAcc.val ( "0" );
							tips.text( "" );
						},
						"Annuler": function() {
							$( this ).dialog( "close" );
						}
					},
					close: function() {
						allFields.val( "" ).removeClass( "ui-state-error" );
						myAcc.val ( "0" );
						tips.text( "" );
					},
					open: function() {
						
					}
				});
				
			});
		{/literal}
		</script>